<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="HTML5VisualizationPlayer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 可视化音乐播放器</title>
    <link type="text/css" rel="stylesheet" href="/static/player/css/main.css">
    <link type="text/css" rel="stylesheet" href="/static/css/player.css">
    <script type="text/javascript" src="/static/js/player.js"></script>
</head>
<body>
<ul class="shadows">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class="drive">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="play-box">
    <player></player>
</div>
</body>
<script>
    var player = new Player();
    player.init({
        autoPlay: false,//自动播放,2018年1月谷歌浏览器不支持自动播放，设置true不能自动播放
        effect: 0,//频谱效果,不设置或0为随机变化,1为条形柱状,2为环状声波,3 心电图效果
        color: null,//颜色 color:16进制颜色代码,不设置或设置为空(空字符或null)将随机使用默认颜色
        button: {//设置生成的控制按钮,不设置button默认全部创建
            prev: true,//上一首
            play: true,//播放,暂停
            next: true,//下一首
            volume: true,//音量
            progressControl: true,//是否开启进度控制
        },
        event: function (e) {
            //这是一个事件方法,点击控制按钮会到此方法
            //参数:e.eventType 事件类型
            //参数:e.describe 事件详情,或参数
            //e.eventType  prev: 点击上一首,next：点击下一首,play:点击 播放/暂停
            console.log(e);
        },
        energy: function (value) {
            //此时播放的能量值,时刻变化
            console.log(value);
        },
        playList: [//播放列表
            {
                title: "{{ music.song_name }}", //音乐标题
                album: "{{ music.composer }}", //所属专辑
                artist: "{{ music.artist_name }}", //艺术家
                mp3: "/static/audio/audio.mp3", //音乐路径
            },
        ]
    });
</script>
</html>